<template>
    <div>
        <el-card class="box-card">
            <div class="header-box">
                <span class="title-name">盘点主题名称 :</span>
                <el-input class="handle-input" clearable v-model="header.valueName" placeholder="请输入内容"></el-input>
            </div>
            <el-button type="primary" icon="el-icon-search" @click="seled">查询</el-button>
            <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addventory">添加</el-button>
        </el-card>
        <div class="container">
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column type="index" label="序号" width="60" align='center'>
                    <template slot-scope="scope">
                        {{ scope.$index + (query.pageNum - 1) * query.pageSize + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="checkName" label="盘点主题" align='center'></el-table-column>
                <el-table-column prop="headName" label="盘点负责人" align='center'></el-table-column>
                <el-table-column prop="checkPlace" label="盘点位置" align='center'></el-table-column>
                <el-table-column prop="planCheckTime" label="盘点计划时间" align='center'></el-table-column>
                <el-table-column prop="checkTime" label="盘点完成时间" width="180" align='center'></el-table-column>
                <el-table-column prop="checkState" label="盘点状态" align='center'>
                    <template slot-scope="scope">
                        <span v-if="scope.row.checkState == 0"
                            style="background-color: rgba(0, 102, 255, 0.2); color:rgb(0, 102, 255) ;  display: inline-block; padding: 3px 10px;">未盘点</span>
                        <span v-else
                            style="background-color: rgba(5, 212, 57, 0.1);  color: rgb(5, 212, 57); display: inline-block; padding: 3px 10px;">已盘点</span>
                    </template>
                </el-table-column>
                <!-- //0位1已 -->
                <el-table-column prop="shouldCheck" label="应盘数量" align='center'>
                    <template slot-scope="scope">
                        <el-link @click="lookdetail('1,3', scope.row.id)" type="primary" :underline="false"
                            style="text-decoration: underline;">{{
                                scope.row.shouldCheck
                            }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="actualCheck" label="实盘数量" align='center'>
                    <template slot-scope="scope">
                        <el-link target="_blank" @click="lookdetail('1,2', scope.row.id)" type="primary"
                            style="text-decoration: underline;" :underline="false">{{
                                scope.row.actualCheck
                            }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="checkMore" label="盘盈数量" align='center'>
                    <template slot-scope="scope">
                        <el-link target="_blank" @click="lookdetail(2, scope.row.id)" type="primary"
                            style="text-decoration: underline;" :underline="false">{{
                                scope.row.checkMore
                            }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="checkLess" label="盘亏数量" align='center'>
                    <template slot-scope="scope">
                        <el-link target="_blank" @click="lookdetail(3, scope.row.id)" type="primary"
                            style="text-decoration: underline;" :underline="false">{{
                                scope.row.checkLess
                            }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" align='center'></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" class="mr10" @click="detail(scope.row.id)"
                            v-show="scope.row.checkState != 0">详情</el-link>
                        <el-link type="primary" class="mr10" @click="edit(scope.row.id)"
                            v-show="scope.row.checkState == 0">编辑</el-link>
                        <el-link type="danger" class="mr10" @click="del(scope.row.id)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                    :page-size="query.pageSize" :total="query.pageTotal"
                    @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
        <vertoryedit ref="vertoryedit" :visible="visible" @close="visible = false" @refreshedit="checklistByPages">
        </vertoryedit>
        <vertoryadd ref="vertoryadd" :disable="disable" @close="disable = false" @refresh="checklistByPages">
        </vertoryadd>
        <vertorydetail ref="vertorydetail" :detailshow="detailshow" @close="detailshow = false"></vertorydetail>
        <vertorylook ref="vertorylook" :lookshow="lookshow" @close="lookshow = false"></vertorylook>
    </div>
</template>

<script>
import vertoryedit from './components/assetinvertory_edit.vue'
import vertoryadd from './components/assetinvertory_add.vue'
import vertorydetail from './components/assetinvertory_detail.vue'
import vertorylook from './components/assetinvertory_look.vue'
import { checklistByPage, checkdel } from '../../../api/index'
export default {

    data() {
        return {
            lookshow: false,
            detailshow: false,
            disable: false,
            visible: false,
            header: {
                valueName: "", //名称
            },
            query: {
                checkName: '',
                pageNum: 1,
                pageSize: 10,
                pageTotal: 0,
            },
            tableData: [],
        };
    },
    components: {
        vertoryedit,
        vertoryadd,
        vertorydetail,
        vertorylook
    },
    mounted() {
        this.checklistByPages()
    },
    methods: {
        lookdetail(e, id) {
            this.lookshow = true
            this.$refs.vertorylook.open(e, id)

        },
        async checklistByPages() {
            const data = await checklistByPage(this.query)
            if (data.data.data.records.length == 0 && data.data.data.total > 0) {
                this.query.pageNum--
                this.checklistByPages()
                return
            }
            this.tableData = data.data.data.records
            this.query.pageTotal = data.data.data.total
            // console.log(data);
        },
        //查询
        seled() {
            this.query.checkName = this.header.valueName
            this.query.pageNum = 1
            this.checklistByPages()
        },
        // 重置
        reset() {
            this.query.checkName = ""
            this.header.valueName = ""
            this.query.pageNum = 1
            this.checklistByPages()
        },
        del(id) {
            this.$confirm('此操作将永久删除该条数据信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await checkdel(id)
                this.checklistByPages()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        addventory() {
            this.disable = true
            this.$refs.vertoryadd.open()
        },
        detail(id) {
            this.detailshow = true
            this.$refs.vertorydetail.open(id)

        },
        edit(id) {
            this.visible = true
            this.$refs.vertoryedit.open(id)
        },
        handlePageChange(val) {
            this.query.pageNum = val;
            this.checklistByPages()

        },
    }
};
</script>

<style scoped>
.header-box {
    display: inline-block;
}

.title-name {
    font-size: 14px;
    margin-right: 10px;
}

.handle-input {
    width: 220px;
    margin-right: 10px;
}

.handle-select {
    width: 220px;
    margin-right: 10px;
}


.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}
</style>
